import React,  {Component} from 'react';


import ReactDOM from 'react-dom';
import {connect}  from  'dva'
import { Table, Input, InputNumber, Popconfirm, Form ,Select,Button, Modal,Row, Col,Pagination, Alert} from 'antd';
import AddProduct from '@/components/ProductTable/addproduct'
import styles from './producttabe.less';


  // @connect(({ tab, loading }) => ({
  //   tab,
  //   loading: loading.models.tab,
  // }))
// const FormItem = Form.Item;
//表格的数据逻辑
const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    haha: `Edrward ${i}`,
    age: 32,
    prople:`闯将 ${i}`,
    address: `London Park no. ${i}`,
  });
}
const FormItem = Form.Item;
const EditableContext = React.createContext();

const EditableRow = ({ form, index, ...props }) => (
  <EditableContext.Provider value={form}>
    <tr {...props} />
  </EditableContext.Provider>
);

const EditableFormRow = Form.create()(EditableRow);

class EditableCell extends React.Component {
  getInput = () => {
    if (this.props.inputType === 'number') {
      return <InputNumber />;
    }
    return <Input />;
  };

  render() {
    const {
      editing,
      dataIndex,
      title,
      inputType,
      record,
      index,
      ...restProps
    } = this.props;
    return (
      <EditableContext.Consumer>
        {(form) => {
          const { getFieldDecorator } = form;
          return (
            <td {...restProps}>
              {editing ? (
                <FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(dataIndex, {
                    rules: [{
                      required: true,
                      message: `Please Input ${title}!`,
                    }],
                    initialValue: record[dataIndex],
                  })(this.getInput())}
                </FormItem>
              ) : restProps.children}
            </td>
          );
        }}
      </EditableContext.Consumer>
    );
  }
}

  @connect(({ tab, loading }) => ({
    tab,
    loading: loading.models.tab,
  }))

class EditableTable extends React.Component {
  constructor(props) {
 
    super(props);
    this.state = { data, editingKey: '' ,
      taddataL:[],
      total_no:'',
      productName:'',
      tabdata:[]
  };
    this.columns = [
      {
        title: 'APP ID',
        dataIndex: 'application_id',
        width: '10%',
        editable: true,
      },
      {
        title: 'SECRET KEY',
        dataIndex: 'secret_key',
        width: '10%',
        editable: true,
      },
      {
        title: '产品名称',
        dataIndex: 'name',
        width: '10%',
        editable: true,
      },
      {
        title: '所属平台',
        dataIndex: 'platform',
        width: '10%',
        editable: true,
      },
      {
        title: '产品说明',
        dataIndex: 'creator',
        width:'10%',
        //点击编辑模块
        // render: (text, record) => {
        //   const editable = this.isEditing(record);
        //   return (
        //     <div>
        //       {editable ? (
        //         <span>
        //           <EditableContext.Consumer>
        //             {form => (
        //               <a
        //                 href="javascript:;"
        //                 onClick={() => this.save(form, record.key)}
        //                 style={{ marginRight: 8 }}
        //               >
        //                保存
        //               </a>
        //             )}
        //           </EditableContext.Consumer>
        //           <Popconfirm
        //             title="Sure to cancel?"
        //             onConfirm={() => this.cancel(record.key)}
        //           >
        //             <a>取消</a>
        //           </Popconfirm>
        //         </span>
        //       ) : (
        //         <span></span>
        //         // <a onClick={() => this.edit(record.key)}>编辑</a>
      
        //       )}
        //     </div>
        //   );
        // },
      },
    ];
  }
componentWillReceiveProps(nextProps){
        // console.log(nextProps);
        if(nextProps.haha.length==0){
         return 
        }else{
          // alert(2)
        this.setState({
                  taddataL:nextProps.haha.result.result_list,
                  total_no:nextProps.haha.result.total_record_number,
                });
        }
  }


 

  isEditing = (record) => {
    return record.key === this.state.editingKey;
  };

  edit(key) {
    this.setState({ editingKey: key });
  }

  save(form, key) {
    form.validateFields((error, row) => {
      if (error) {
        return;
      }
      const newData = [...this.state.data];
      const index = newData.findIndex(item => key === item.key);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        this.setState({ data: newData, editingKey: '' });
      } else {
        newData.push(row);
        this.setState({ data: newData, editingKey: '' });
      }
    });
  }

  cancel = () => {
    this.setState({ editingKey: '' });
  };

  state = { visible: false }
  changePage(a,b){
       console.log(a,b)
       var obj={
        page_no:a,
        page_size:10
       }
       var {dispatch }=this.props
      dispatch({
        type:'tab/tabdatalist',
        payload: {
          ...obj,
        },
      })

  }

  render() {
    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    };
    const columns = this.columns.map((col) => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          inputType: col.dataIndex === 'age' ? 'number' : 'text',
          dataIndex: col.dataIndex,
          title: col.title,
          editing: this.isEditing(record),
        }),
      };
    });
    return (
    <div className={styles.probody}>
    <div>
    </div>
      <div className={styles.addProduct}>
           <AddProduct />
      </div>
      <Table
        components={components}
        bordered
        // rowKey={}
        pagination={{
           total:this.state.total_no,
           onChange: this.changePage.bind(this),
        }}
        dataSource={this.state.taddataL}
        columns={columns}
        rowClassName={styles.editable}
      />
      </div>
    );
  }
}

export default   EditableTable
